<template>
    <div class="Active">
      <ul class="header__tab">
          <li class="header__tab__item" :class="{'header__tab__item__active': search.actStatus == ''}" @click="setSearchType('')">全部</li>
          <li class="header__tab__item" :class="{'header__tab__item__active': search.actStatus == 1}" @click="setSearchType(1)">进行中</li>
          <li class="header__tab__item" :class="{'header__tab__item__active': search.actStatus == 2}" @click="setSearchType(2)">即将开始</li>
          <li class="header__tab__item" :class="{'header__tab__item__active': search.actStatus == 3}" @click="setSearchType(3)">待定</li>
          <li class="header__tab__item" :class="{'header__tab__item__active': search.actStatus == 4}" @click="setSearchType(4)">已结束</li>
      </ul>
      <div class="Active__main">
        <div class="Order__search">
          <div class="Order__search__right">
          <button class="Ecp-button-primary" @click="findFavourableList(1)">搜索</button>
          </div>
          <div class="Order__search__left">
              <div class="Order__search__group">
                  <span class="Order__search__name">活动名称</span>
                  <input class="Order__search__input" v-model="search.actName" placeholder="请输入活动名称"/>
              </div>
          </div>
        </div>
        <el-table
          :height="getTableHeight"
          header-row-class-name="Active__table__header"
          row-class-name="Active__table__row"
          :data="tableData">
          <el-table-column fixed  label="状态" property="actStatus" width="100" border="none;" align="center"
            :filters="[{text: '进行中', value: 1},{text: '待定', value: 3},{text: '已结束', value: 4}]"
            :filter-multiple="false" :filter-method="filterHandler">
            <template slot-scope="scope">
              <span class="datecolor">{{ scope.row.actStatus | actStatusFilters }}</span>
            </template>
          </el-table-column>
          <el-table-column label="活动类型" property="actType" width="150"  border="none;" align="center"
            :filters="[{text: '换购活动', value: 1},{text: '满赠活动', value: 2}]"
            :filter-multiple="false" :filter-method="filterHandler">
            <template slot-scope="scope">
              <p>{{ scope.row.actName}}</p>
              <p v-bind:class="{huancolor: scope.row.actType==1,mancolor: scope.row.actType==2}">{{ scope.row.actType==1?'换购活动':'满赠活动'}}</p>
              <p>ID:{{ scope.row.id}}</p>
            </template>
          </el-table-column>
          <el-table-column label="开始时间"  border="none" align="center" sortable>
            <template slot-scope="scope">
              <p>{{ scope.row.startTime}}</p>
            </template>
          </el-table-column>
          <el-table-column label="结束时间"  border="none" align="center" sortable>
            <template slot-scope="scope">
              <p>{{ scope.row.endTime}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="actSectionCount" label="活动段数" width="110"
            border="none" align="center" sortable></el-table-column>
          <el-table-column prop="actCount" label="商品数量" width="110"
            border="none" align="center" sortable></el-table-column>
          <el-table-column prop="offset" label="参与次数" width="110"
            border="none" align="center" sortable></el-table-column>
          <el-table-column fixed="right" label="操作" width="100" border="none"  align="center">
            <template slot-scope="scope">
                <el-button v-if="scope.row.actStatus==3||!scope.row.actStatus" @click.native="updateActStatus(scope.row.id, 1)" type="text" border="none" align="center">开始</el-button>
                <el-button v-if="scope.row.actStatus==1||scope.row.actStatus==2" @click.native="updateActStatus(scope.row.id, 3)" type="text" border="none" align="center">暂停</el-button><br/>
                <nuxt-link style="color:#409EFF;" :to="`/active/addActive/${scope.row.id}`">编辑</nuxt-link><br/>
                <el-button type="text" align="center" @click.native="deleteFavourableById(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      <div class="Active__table__pagination">
        <el-pagination
          v-show="pageData.total>0"
          layout="prev, pager, next"
          @current-change="findFavourableList"
          :page-size="pageData.pageSize"
          :current-page="pageData.pageNum"
          :total="pageData.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { findFavourableList, updateActStatus, deleteFavourableById } from "~/api/apiv1";
export default {
    data() {
      return {
        search: {
          actStatus: 'all0',
          actName: '',
        },
        tableData: [{
          date: '即将开始',
          name: ['山田studio','换购活动','ID:8324263532'],
          province: ['2018-05-03',  '12:00'],
          city: ['2018-05-03',  '12:00'],
          address: '4段',
          zip: '12件',
          zet:'105'
        }, {
          date: '进行中',
          name: ['山田studio','满赠活动','ID:8324263532'],
          province: ['2018-05-03',  '12:00'],
          city: ['2018-05-03',  '12:00'],
          address: '4段',
          zip:'12件',
          zet:'105'
        }, {
          date: '待定',
          name: ['山田studio','满赠活动','ID:8324263532'],
          province: ['2018-05-03',  '12:00'],
          city: ['2018-05-03',  '12:00'],
          address: '4段',
          zip: '12件',
          zet:'105'
        }, {
          date: '已结束',
          name: ['山田studio','满赠活动','ID:8324263532'],
          province: ['2018-05-03',  '12:00'],
          city: ['2018-05-03',  '12:00'],
          address:"4段",
          zip: '12件',
          zet:'105'
        }]
      }
    },
    beforeMount() {
      if (this.tableData.length == 0 && this.message) {
        this.$alert(this.message, '提示', {type: 'error'})
      }
    },
    async asyncData({app}) {
      const res = await findFavourableList(app, "", "", 1, 15)
      if (res.code != '0') return {
        pageData: {
          pageNum: 1,
          pageSize: 15,
          total: 0,
          totalNum: 1,
        },
        tableData: [],
        message: res.message
      }
      const {pageNum, pageSize, total, totalNum} = res.data.page
      return {
        tableData: res.data.page.list,
        pageData:{
          pageNum, pageSize, total, totalNum
        }
      }
    },
    methods: {
      async findFavourableList(page) {
        const res = await findFavourableList(this, this.search.actName, this.actStatus, page, this.pageData.pageSize)
        if (res.code != '0') return this.$alert(res.message, '提示', {type: 'error'})
        const {pageNum, pageSize, total, totalNum} = res.data.page
        this.tableData = res.data.page.list
        this.pageData = {pageNum, pageSize, total, totalNum}
      },
      setSearchType (status) {
        this.search.actStatus = status
        this.findFavourableList(1)
      },
      async updateActStatus (id, actStatus) {
        const res = await updateActStatus(this, {id, actStatus})
        if (res.code != '0') return this.$alert(res.message, '提示', {type: 'error'})
        this.$message.success('操作成功')
        this.findFavourableList(this.pageData.pageNum)
      },
      async deleteFavourableById (id) {
        const res = deleteFavourableById(this, id)
        if (res.code != '0') return this.$alert(res.message, '提示', {type: 'error'})
        // this.$message.success('操作成功')
        let page = 1
        if (this.pageData.pageNum > 1) {
          if (this.tableData.length > 1) {
            page = this.pageData.pageNum
          } else {
            page = this.pageData.pageNum-1
          }
        }
        this.findFavourableList(page)
      },
      handleClick(row) {
        console.log(row);
      },
      filterHandler(value, row, column) {
        const property = column['property']
        return row[property] === value;
      }
    },
    filters: {
      actStatusFilters(status) {
        if (!status) return '待定'
        return {
          "1": '进行中',
          "2": '即将开始',
          "3": '待定',
          "4": '已结束活动'
        }[status]
      }
    },
    computed: {
      getTableHeight () {
        return this.$store.state.innerHeight-227
      }
    }
  }
</script>

<style lang="scss" scoped>
  .Active {
    &__main {
      padding: 20px 30px;
    }
    & /deep/ {
      .el-button--text {
        font-size: 16px;
      }
      .Active__table__pagination {
        text-align: center;
        background-color: #fff;
        padding: 15px;
      }
      .Active__table__header {
        th {
          font-size: 16px;
          border-bottom: none;
          color: #191919;
        }
      }
      .Active__table__row {
        font-size: 16px;
        color: #191919;
        td {
          border: none;
        }
      }
    }
  }
   .datecolor{
      color: #409EFF;
   }
   .huancolor{
     color:#6dc361
   }
  .mancolor{
     color:#f95c79
   }
 .Order__search{
      width:100%;
      background-color: #fff;
      border-bottom: 1px solid #bdbdbd;
     .Order__search__left{
        margin-right: 108px;
        padding: 15px 0 5px 55px;
        position: relative;
        &:before {
            content: "";
            display: block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #333856;
            position: absolute;
            top: 28px;
            left: 19px;
        }
        .Order__search__group{
                height: 28px;
                line-height: 28px;
                display: inline-block;
                margin-bottom: 10px;
                margin-right: 28px;
         .Order__search__name{
                   vertical-align: middle;
                   margin-right: 15px;
         }
         .Order__search__input{
                  height: 25px;
                background-color: #f0f5fb;
                border-radius: 9px;
                vertical-align: middle;
                border: none;
                padding: 0 10px;
                text-align: center;
                font-size: 13px;
                &:focus {
                    outline: none;
                }
         }
        }
      }
      .Order__search__right{
      float: right;
      width: 108px;
      margin-top: 12px;
      }
  }
</style>
